<template>
    <el-row class="login">
        <el-col :lg="16" :md="12" class="loginLeft">
            <div>
                <div class="loginLeftTextTop">欢迎光临</div>
                <div class="loginLeftTextBottom">欢迎来到蒂莎后台管理系统，此后台系统主为练习各个常见业务功能的开发</div>
            </div>
        </el-col>
        <el-col :lg="8" :md="12" class="loginRight">
            <h2 class="loginRightTitle">欢迎回来</h2>
            <div class="loginRightSolid">
                <span class="loginRightSolidSpan"></span>
                <span>账号密码登录</span>
                <span class="loginRightSolidSpan"></span>
            </div>
            <el-form :rules="rules" ref="formRef" :model="form" class="loginRightForm">
                <el-form-item prop="username">
                    <el-input v-model="form.username" placeholder="请输入用户名">
                        <template #prefix>
                            <el-icon>
                                <user />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" show-password v-model="form.password" placeholder="请输入密码">
                        <template #prefix>
                            <el-icon>
                                <lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" class="loginRightFormButton" type="primary"
                        @click="onSubmit">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>
<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { elNotification } from '@/hooks/elNotification'
import { useRouter } from 'vue-router'
import { login, getInfo } from '@/api/manager'
import { setToken } from '@/hooks/cookies'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const router = useRouter()

// 登录表单数据绑定
const form = reactive({
    username: '',
    password: ''
})

// 登陆表单验证
const rules = reactive({
    username: [{
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
    }, {
        min: 3,
        max: 5,
        message: '长度在3到5个字符',
        trigger: 'blur'
    }],
    password: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    }, {
        min: 3,
        max: 5,
        message: '长度在3到5个字符',
        trigger: 'blur'
    }]
})

// 表单节点
const formRef = ref(null)

// 按钮加载
const loading = ref(false)

// 登录提交
const onSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) {
            return;
        }
        loading.value = true
        login(form.username, form.password).then(res => {

            // 提示成功
            elNotification('登陆成功')

            // 存储token
            setToken(res.token)

            // 跳转到后台页
            router.push('/')

        }).finally(() => {
            loading.value = false
        })
    })
}

// 监听回车事件

const onKeyUp = (e) => {
    if (e.key === "Enter") {
        onSubmit()
    }
}
onMounted(() => {
    document.addEventListener("keyup", onKeyUp)
})
onUnmounted(() => {
    document.removeEventListener("keyup", onKeyUp)
})

</script>
<style scoped lang="less">
.login {
    min-height: 100vh;
    background-color: #494ed2;

    .loginLeft {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20px;

        .loginLeftTextTop {
            margin-bottom: 10px;
            font-size: 3rem;
            font-weight: 800;
            color: #fff;
        }

        .loginLeftTextBottom {
            color: #eee;
        }
    }

    .loginRight {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;

        .loginRightTitle {
            font-weight: 800;
            font-size: 3rem;
        }

        .loginRightSolid {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 20px 0;
            width: 250px;
            color: #bbbbbb;

            .loginRightSolidSpan {
                height: 1px;
                width: 70px;
                background-color: #bbb;
            }
        }

        .loginRightForm {
            width: 250px;

            .loginRightFormButton {
                width: 100%;
                background-color: #494ed2;
                transition: all 0.3s ease;

                &:hover {
                    background-color: #6d6ed4;
                }
            }
        }
    }
}
</style>